Přístupnost webu: Optimalizace vašich stránek pro uživatele čteček obrazovky

V dnešní digitální době není přístupnost webu jen něčím, co je „pěkné mít“; je to základní požadavek. Přístupný web zaručuje, že lidé s postižením, včetně těch, kteří se spoléhají na čtečky obrazovky, mohou vnímat, chápat, navigovat a interagovat s webem.

Tento komplexní průvodce se ponoří do specifik optimalizace vašeho webu pro uživatele čteček obrazovky a bude se zabývat základními technikami, osvědčenými postupy a příklady z praxe.

Co je to čtečka obrazovky?

Čtečka obrazovky je asistivní technologie, která převádí text a další prvky na obrazovce počítače na mluvený výstup nebo Braillovo písmo. Umožňuje zrakově postiženým osobám přístup k digitálnímu obsahu a interakci s ním. Mezi oblíbené čtečky obrazovky patří:

• JAWS (Job Access With Speech): Široce používaná čtečka obrazovky pro Windows.
• NVDA (NonVisual Desktop Access): Bezplatná a open-source čtečka obrazovky pro Windows.
• VoiceOver: Vestavěná čtečka obrazovky od Applu pro macOS a iOS.
• ChromeVox: Rozšíření čtečky obrazovky pro Google Chrome a Chrome OS.
• Orca: Bezplatná a open-source čtečka obrazovky pro Linux.

Čtečky obrazovky fungují tak, že interpretují podkladový kód webové stránky a poskytují uživateli informace o obsahu a struktuře. Je klíčové, aby byly webové stránky strukturovány tak, aby jim čtečky obrazovky mohly snadno porozumět a navigovat v nich.

Proč je optimalizace pro čtečky obrazovky důležitá?

Optimalizace vašeho webu pro čtečky obrazovky nabízí řadu výhod:

• Inkluzivita: Zajišťuje, že zrakově postižení uživatelé mohou efektivně přistupovat k vašemu webu a používat jej.
• Soulad s legislativou: Mnoho zemí má zákony a předpisy vyžadující přístupnost webu (např. Americans with Disabilities Act (ADA) ve Spojených státech, Accessibility for Ontarians with Disabilities Act (AODA) v Kanadě a EN 301 549 v Evropě).
• Zlepšený uživatelský prožitek: Přístupný design často vede k lepšímu uživatelskému prožitku pro všechny uživatele, bez ohledu na postižení.
• Širší dosah publika: Tím, že svůj web zpřístupníte, otevíráte jej širšímu potenciálnímu publiku.
• Výhody pro SEO: Vyhledávače upřednostňují přístupné weby, což může zlepšit vaše pozice ve výsledcích vyhledávání.

Klíčové principy optimalizace pro čtečky obrazovky

Následující principy jsou nezbytné pro vytváření webů přátelských ke čtečkám obrazovky:

1. Sémantické HTML

Správné používání sémantických prvků HTML je klíčové pro poskytnutí struktury a významu vašemu obsahu. Sémantické prvky sdělují účel různých částí vašeho webu čtečkám obrazovky, což uživatelům umožňuje efektivnější navigaci.

Příklady:

• Použijte <header> pro záhlaví stránky.
• Použijte <nav> pro navigační menu.
• Použijte <main> pro hlavní oblast obsahu.
• Použijte <article> pro zapouzdření nezávislých bloků obsahu.
• Použijte <aside> pro doplňkový obsah.
• Použijte <footer> pro zápatí stránky.
• Použijte <h1> až <h6> pro nadpisy.
• Použijte <p> pro odstavce.
• Použijte <ul> a <ol> pro seznamy.

Příklad kódu:

<header> <h1>Moje webové stránky</h1> <nav> <ul> <li><a href="#">Domů</a></li> <li><a href="#">O nás</a></li> <li><a href="#">Služby</a></li> <li><a href="#">Kontakt</a></li> </ul> </nav> </header> <main> <article> <h2>Název článku</h2> <p>Toto je hlavní obsah článku.</p> </article> </main> <footer> <p>Copyright 2023</p> </footer>

2. Alternativní text pro obrázky

Obrázky by měly vždy mít popisný alternativní text (alt text), který uživatelům čteček obrazovky sděluje obsah a účel obrázku. Alt text by měl být stručný a informativní.

Osvědčené postupy:

• Poskytněte alt text pro všechny obrázky, včetně dekorativních.
• Udržujte alt text stručný a popisný.
• Vyhněte se používání frází jako „obrázek“ nebo „fotografie“.
• Pro složité obrázky zvažte použití dlouhého popisu (atribut longdesc nebo samostatný popisný text).
• Pokud je obrázek čistě dekorativní a nepřidává žádný význam, použijte prázdný atribut alt (alt=""), aby ho čtečky obrazovky neoznamovaly.

Příklad kódu:

<img src="logo.png" alt="Logo společnosti"> <img src="decorative.png" alt="">

3. Atributy ARIA

Atributy ARIA (Accessible Rich Internet Applications) poskytují čtečkám obrazovky dodatečné informace o roli, stavu a vlastnostech prvků, zejména pro dynamický obsah a složité widgety. Atributy ARIA mohou zlepšit přístupnost, když sémantické HTML samo o sobě nestačí.

Běžné atributy ARIA:

• role: Definuje roli prvku (např. role="button", role="navigation").
• aria-label: Poskytuje textový popisek pro prvek, když vizuální popisek není přítomen nebo je nedostatečný.
• aria-labelledby: Spojuje prvek s jiným prvkem, který slouží jako jeho popisek.
• aria-describedby: Spojuje prvek s jiným prvkem, který poskytuje jeho popis.
• aria-hidden: Skryje prvek před čtečkami obrazovky.
• aria-live: Označuje, že obsah prvku je dynamicky aktualizován (např. aria-live="polite", aria-live="assertive").
• aria-expanded: Označuje, zda je sbalitelný prvek aktuálně rozbalený nebo sbalený.
• aria-haspopup: Označuje, že prvek má vyskakovací menu.

Příklad kódu:

<button role="button" aria-label="Zavřít dialogové okno" onclick="closeDialog()">X</button> <div id="description">Toto je popis obrázku.</div> <img src="example.jpg" aria-describedby="description" alt="Příklad obrázku">

Důležitá poznámka: Používejte atributy ARIA uvážlivě. Nadměrné používání ARIA může způsobit problémy s přístupností. Vždy nejprve použijte sémantické prvky HTML a ARIA používejte pouze tehdy, je-li to nutné k doplnění nebo přepsání výchozí sémantiky.

4. Klávesnicová navigace

Zajistěte, aby všechny interaktivní prvky na vašem webu byly ovladatelné pouze pomocí klávesnice. To je klíčové pro uživatele, kteří nemohou používat myš nebo jiné polohovací zařízení. Klávesnicová navigace silně závisí na správném použití indikátorů fokusu a logickém pořadí tabulátorů.

Osvědčené postupy:

• Indikátory fokusu: Zajistěte, aby všechny interaktivní prvky (např. odkazy, tlačítka, pole formuláře) měly jasný a viditelný indikátor fokusu, když jsou vybrány. Použijte CSS ke stylování stavu :focus.
• Pořadí tabulátorů: Pořadí tabulátorů by mělo sledovat logické pořadí čtení stránky (obvykle zleva doprava, shora dolů). Pro úpravu pořadí tabulátorů v případě potřeby použijte atribut tabindex. Vyhněte se používání tabindex="0" a tabindex="-1", pokud to není nezbytně nutné, protože při nesprávném použití mohou způsobit problémy s přístupností.
• Odkazy pro přeskočení navigace: Na začátku stránky poskytněte odkaz „přeskočit navigaci“, který uživatelům umožní obejít hlavní navigační menu a přejít přímo na hlavní obsah. To je obzvláště užitečné pro uživatele, kteří používají čtečky obrazovky, protože to snižuje potřebu procházet opakující se navigační odkazy na každé stránce.
• Modální dialogy: Když je otevřen modální dialog, zajistěte, aby byl fokus uvězněn uvnitř dialogu, dokud nebude zavřen. Zabraňte uživatelům v tabulování mimo dialog.

Příklad kódu (Odkaz pro přeskočení navigace):

<a href="#main-content" class="skip-link">Přeskočit na hlavní obsah</a> <header> <nav> <!-- Navigační menu --> </nav> </header> <main id="main-content"> <!-- Hlavní obsah --> </main>

Příklad kódu (CSS pro indikátor fokusu):

a:focus, button:focus, input:focus, textarea:focus, select:focus { outline: 2px solid blue; outline-offset: 2px; }

5. Přístupnost formulářů

Formuláře jsou kritickou součástí mnoha webových stránek a je nezbytné zajistit, aby byly přístupné uživatelům čteček obrazovky. Správné popisky, jasné instrukce a zpracování chyb jsou pro přístupnost formulářů klíčové.

Osvědčené postupy:

• Popisky: Použijte prvek <label> k přiřazení popisků k polím formuláře. Atribut for prvku <label> by měl odpovídat atributu id příslušného pole formuláře.
• Instrukce: Poskytněte jasné a stručné instrukce pro vyplnění formuláře. Použijte atribut aria-describedby k přiřazení instrukcí k polím formuláře.
• Zpracování chyb: Zobrazujte chybové zprávy jasně a viditelně. Použijte atribut aria-live k oznámení chybových zpráv uživatelům čteček obrazovky. Přiřaďte chybové zprávy k příslušným polím formuláře pomocí atributu aria-describedby.
• Povinná pole: Jasně označte povinná pole, a to jak vizuálně, tak programově. Použijte atribut required k označení povinných polí. Použijte atribut aria-required k oznámení uživatelům čteček obrazovky, že je pole povinné.
• Seskupování souvisejících polí: Použijte prvky <fieldset> a <legend> k seskupení souvisejících polí formuláře.

Příklad kódu:

<label for="name">Jméno:</label> <input type="text" id="name" name="name" required aria-required="true"> <div id="name-instructions">Prosím, zadejte své celé jméno.</div> <label for="name">Jméno:</label> <input type="text" id="name" name="name" aria-describedby="name-instructions"> <form> <fieldset> <legend>Kontaktní informace</legend> <label for="email">E-mail:</label> <input type="email" id="email" name="email" required aria-required="true"><br><br> <label for="phone">Telefon:</label> <input type="tel" id="phone" name="phone"> </fieldset> </form>

6. Přístupnost dynamického obsahu

Když se obsah na vašem webu dynamicky mění (např. pomocí AJAX nebo JavaScriptu), je klíčové zajistit, aby byli uživatelé čteček obrazovky o změnách informováni. Použijte ARIA live regions k oznamování aktualizací dynamického obsahu.

ARIA Live Regions:

• aria-live="off": Výchozí hodnota. Aktualizace v oblasti nejsou oznamovány.
• aria-live="polite": Oznamuje aktualizace, když je uživatel nečinný. Toto je nejběžnější a doporučená hodnota.
• aria-live="assertive": Oznamuje aktualizace okamžitě a přerušuje uživatele. Tuto hodnotu používejte střídmě, protože může být rušivá.

Příklad kódu:

<div aria-live="polite" id="status-message"></div> <script> // Když je obsah aktualizován, aktualizujte stavovou zprávu document.getElementById('status-message').textContent = "Obsah byl úspěšně aktualizován!"; </script>

7. Barevný kontrast

Zajistěte dostatečný barevný kontrast mezi textem a barvou pozadí. To je důležité pro uživatele se slabým zrakem nebo barvoslepostí. Pokyny pro přístupnost webového obsahu (WCAG) vyžadují kontrastní poměr alespoň 4.5:1 pro běžný text a 3:1 pro velký text.

Nástroje pro kontrolu barevného kontrastu:

• WebAIM Color Contrast Checker (webaim.org/resources/contrastchecker/)
• Coolors (coolors.co)
• Adobe Color (color.adobe.com)

8. Přístupnost médií

Pokud váš web obsahuje audio nebo video obsah, poskytněte alternativy pro uživatele, kteří nemohou obsah vidět nebo slyšet. To zahrnuje:

• Titulky: Poskytněte titulky pro veškerý video obsah. Titulky jsou synchronizované textové přepisy zvukové stopy.
• Přepisy: Poskytněte textové přepisy pro veškerý audio a video obsah. Přepisy by měly obsahovat veškerý mluvený obsah, stejně jako popisy důležitých zvuků a vizuálních prvků.
• Zvukové popisy: Poskytněte zvukové popisy pro video obsah. Zvukové popisy popisují vizuální prvky videa pro uživatele, kteří jsou nevidomí nebo zrakově postižení.

9. Testování pomocí čteček obrazovky

Nejefektivnějším způsobem, jak zajistit, že je váš web přístupný uživatelům čteček obrazovky, je testovat jej s různými čtečkami obrazovky. To vám pomůže identifikovat a opravit jakékoli problémy s přístupností, které mohou být přítomny.

Nástroje pro testování:

• Manuální testování: Použijte čtečky obrazovky jako NVDA (zdarma), JAWS (placený) nebo VoiceOver (vestavěný v macOS a iOS) k navigaci po vašem webu. Zkuste dokončit běžné úkoly a interakce.
• Automatizované testování: Použijte nástroje pro automatizované testování přístupnosti k identifikaci potenciálních problémů s přístupností. Tyto nástroje vám mohou pomoci odhalit běžné chyby, ale neměly by být používány jako náhrada za manuální testování. Mezi oblíbené nástroje pro testování přístupnosti patří:
• WAVE (Web Accessibility Evaluation Tool)
• axe DevTools
• Lighthouse (in Chrome DevTools)

Tipy pro testování pomocí čteček obrazovky:

• Naučte se základy: Seznamte se se základními příkazy a navigačními technikami čtečky obrazovky, kterou používáte.
• Používejte různé čtečky obrazovky: Testujte svůj web s různými čtečkami obrazovky, protože každá čtečka interpretuje webový obsah odlišně.
• Zapojte uživatele s postižením: Nejlepším způsobem, jak zajistit přístupnost vašeho webu, je zapojit do testovacího procesu uživatele s postižením. Získejte zpětnou vazbu od uživatelů čteček obrazovky ohledně použitelnosti a přístupnosti vašeho webu.

WCAG (Pokyny pro přístupnost webového obsahu)

Pokyny pro přístupnost webového obsahu (WCAG) jsou souborem mezinárodně uznávaných pokynů pro zpřístupnění webového obsahu. WCAG jsou vyvíjeny konsorciem World Wide Web Consortium (W3C) a jsou široce používány jako standard pro přístupnost webu.

WCAG jsou organizovány kolem čtyř principů, známých jako POUR:

• Vnímatelné: Informace a komponenty uživatelského rozhraní musí být uživatelům prezentovány způsoby, které mohou vnímat.
• Ovladatelné: Komponenty uživatelského rozhraní a navigace musí být ovladatelné.
• Srozumitelné: Informace a ovládání uživatelského rozhraní musí být srozumitelné.
• Robustní: Obsah musí být dostatečně robustní, aby mohl být spolehlivě interpretován širokou škálou uživatelských agentů, včetně asistivních technologií.

WCAG se dělí na tři úrovně shody: A, AA a AAA. Úroveň A je nejzákladnější úroveň přístupnosti, zatímco úroveň AAA je nejvyšší úroveň. Většina organizací se snaží dosáhnout shody s úrovní AA.

Závěr

Optimalizace vašeho webu pro uživatele čteček obrazovky je nezbytným krokem k vytvoření skutečně inkluzivního a přístupného online prostředí. Dodržováním principů a osvědčených postupů uvedených v tomto průvodci můžete zajistit, že váš web bude přístupný všem uživatelům bez ohledu na jejich postižení.

Pamatujte, že přístupnost webu je nepřetržitý proces. Pravidelně testujte svůj web pomocí čteček obrazovky a nástrojů pro testování přístupnosti a sledujte nejnovější pokyny a osvědčené postupy v oblasti přístupnosti. Tím, že učiníte přístupnost prioritou, můžete vytvořit lepší web pro všechny.

Další zdroje:

• WebAIM: https://webaim.org/
• W3C Web Accessibility Initiative (WAI): https://www.w3.org/WAI/
• Deque University: https://dequeuniversity.com/